<template>
  <div class="edit-careerplan">
    <div class="header-wrap">
      写职业规划
      <div class="action-btn-wrap">
        <span @click="save" v-if="canSave">保存</span>
        <span @click="modify" v-if="canModify">更新</span>
        <span @click="publish" v-if="canPublish">提交</span>
      </div>
    </div>

    <div class="edit-wrap">
      <div class="editor" :v-model="careerplan.content"></div>
      <div class="input-wrap">
        <div class="fix-input-wrap">
          <el-input
            class="input-title"
            size="mini"
            v-model="careerplan.title"
            placeholder="请填写你的职业规划标题"
          >
          </el-input>
          <el-input
            class="input-title"
            type="textarea"
            size="mini"
            :rows="6"
            :maxlength="150"
            resize="none"
            v-model="careerplan.sub_message"
            placeholder="请填写你的职业规划简介"
          >
          </el-input>
          <div class="label-wrap">
            是否考研：
            <el-checkbox size="mini" v-model="is_studymaster"></el-checkbox>
          </div>
          <div class="label-wrap">
            时段：
            <el-select
              v-model="timeslot"
              filterable
              allow-create
              default-first-option
              size="mini"
              placeholder="请选择你的职业规划时段"
            >
              <el-option
                v-for="item in timeslotList"
                size="mini"
                :key="item.timeslot_id"
                :label="item.name"
                :value="item.timeslot_id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="label-wrap">
            专家：
            <el-select
              v-model="experts"
              filterable
              allow-create
              default-first-option
              size="mini"
              multiple
              placeholder="请选择为你职业规划点评的专家"
            >
              <el-option
                v-for="item in expertsList"
                size="mini"
                :key="item.experts_id"
                :label="item.experts_name"
                :value="item.experts_id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Editor from 'wangeditor'
import {
  getCareerPlan,
  publishCareerPlan,
  saveCareerPlan,
  modifyCareerPlan
} from '@/network/career'
import { getTimesLotList, getExperts } from '@/network/index'

export default {
  name: 'publish',
  data() {
    return {
      editor: {
        info: ''
      },
      isClear: false,
      canPublish: false,
      canModify: false,
      canSave: false,
      is_studymaster: false,
      careerplan: {
        content: '',
        content_html: '',
        title: '',
        sub_message: '',
        is_studymaster: '0'
      },
      careerplan_id: '',
      timeslot: '',
      timeslotList: [],
      experts: [],
      expertsList: []
    }
  },
  created() {
    this.init()
  },
  components: {
    Editor
  },
  computed: {
    ...mapGetters(['userid'])
  },
  mounted() {
    this.editor = new Editor('.editor')
    this.editor.customConfig.onchange = html => {
      this.editorContent = html
      this.careerplan.content_html = html
      this.careerplan.content = this.editor.txt.text()
    }
    this.editor.create()
    this.editor.txt.html(
      '<p>开始编辑职业规划...</p></br>建议在word文档中写完后复制粘贴到此区域'
    )
  },
  methods: {
    init() {
      let id = this.$route.query.careerplan_id
      this.canPublish = false
      this.canModify = false
      this.canSave = false
      this.careerplan = {
        content: '',
        title: '',
        subMessage: '',
        is_studymaster: '0'
      }
      this.timeslot = ''
      this.experts = []
      // 判断此次是否为修改职业规划
      // 若是，则会接收到id，根据id获取职业规划渲染页面
      if (id) {
        let params = { careerplan_id: id }
        getCareerPlan(params).then(res => {
          if (res.code === 200) {
            this.canModify = true
            this.canPublish = true
          } else {
            this.canModify = false
            this.canPublish = true
          }
          this.careerplan = res.data
          this.editor.txt.html(res.data.content_html)
          if (res.data.timeslot_id) {
            this.timeslot = res.data.timeslot_id.timeslot_id
          }
          this.initExperts(res.data.careerplanexperts)
          this.is_studymaster = res.data.is_studymaster
        })
        // 若不是，则渲染新的页面
      } else {
        this.canSave = true
        this.canPublish = true
      }
      getTimesLotList().then(res => {
        if (res.code === 401) {
          this.$toast(res.message, 'error')
        }
        this.timeslotList = res.data
      })
      getExperts().then(res => {
        this.expertsList = res.data
      })
    },
    // 对获取的多个专家进行转化
    initExperts(data) {
      data.forEach(item => {
        this.experts.push(item.experts_id.experts_id)
      })
    },
    getParams() {
      let params = {
        user_id: this.userid,
        content: this.careerplan.content,
        title: this.careerplan.title,
        sub_message: this.careerplan.sub_message,
        is_studymaster: this.is_studymaster ? '1' : '0',
        is_dot: '1',
        content_html: this.careerplan.content_html
      }
      params.timeslot_id = this.timeslot
      params.experts_id_list = this.experts
      if (this.$route.query.careerplan_id) {
        params.careerplan_id = this.$route.query.careerplan_id
      } else {
        params.careerplan_id = this.careerplan_id
      }

      return params
    },
    // 保存，获取保存后的规划id，保存id
    save() {
      let params = this.getParams()
      saveCareerPlan(params).then(res => {
        this.$toast(res.message)
        this.careerplan_id = res.data.careerplan_id
        let params = { careerplan_id: this.careerplan_id }
        getCareerPlan(params).then(res => {
          if (res.code === 200) {
            this.canSave = false
            this.canModify = true
            this.canPublish = true
          }
          this.careerplan = res.data
          this.editor.txt.html(res.data.content_html)
          this.timeslot = res.data.timeslot_id.timeslot_id
          this.initExperts(res.data.careerplanexperts)
          this.is_studymaster = res.data.is_studymaster
        })
      })
    },
    // 更新
    modify() {
      let params = this.getParams()
      modifyCareerPlan(params).then(res => {
        this.$toast(res.message)
      })
    },
    // 提交
    publish() {
      let params = this.getParams()
      if (!params.title) {
        this.$toast('职业规划标题不能为空', 'error')
        return
      }
      if (!params.sub_message) {
        this.$toast('职业规划简介不能为空', 'error')
        return
      }
      if (!params.content) {
        this.$toast('职业规划内容不能为空', 'error')
        return
      }
      if (!params.timeslot_id) {
        this.$toast('职业规划时段不能为空', 'error')
        return
      }
      if (params.experts_id_list.length === 0) {
        this.$toast('专家不能为空', 'error')
        return
      }
      publishCareerPlan(params)
        .then(res => {
          this.$toast(res.message)
        })
        .catch(err => {
          this.$toast(err.msg, 'error')
        })
    }
  }
}
</script>

<style lang="scss">
.edit-careerplan {
  position: relative;
  padding-top: 52px;
  width: 100%;
  overflow-x: hidden;
  .header-wrap {
    position: absolute;
    width: 97%;
    top: 0;
    padding: 18px;
    font-size: 16px;
    font-weight: bold;
    background-color: #fff;
    box-shadow: 1px 1px 10px 1px rgba(38, 42, 48, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .action-btn-wrap {
      span {
        padding: 5px 10px;
        margin-right: 5px;
        font-size: 14px;
        cursor: pointer;
        background-color: #262a30;
        color: #fff;
        border-radius: 8px;
        &:hover {
          background-color: lighten(rgb(38, 42, 48), 10%);
        }
        &:last-child {
          margin-right: 0px;
        }
      }
    }
  }

  .edit-wrap {
    width: 100%;
    padding: 30px 10px;
    padding-top: 10px;
    animation: show 0.8s;
    display: flex;
    flex-direction: row;
    @media (max-width: 1324px) {
      flex-direction: column-reverse;
    }
    .editor {
      min-width: calc(100% - 310px);
      height: calc(100vh - 95px);
      .w-e-text-container {
        height: 97% !important;
      }
    }
    .input-wrap {
      position: relative;
      width: 300px;
      margin-left: 10px;
      transition: all 0.3s;
      @media (max-width: 1324px) {
        width: 100%;
        margin-left: 0px;
        margin-bottom: 10px;
      }
      .fix-input-wrap {
        position: relative;
        width: 300px;
        height: calc(100vh - 112px);
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
        @media (max-width: 1324px) {
          width: 100%;
          height: auto;
        }
        .upload-cover {
          margin-bottom: 10px;
        }
        .input-title {
          margin-bottom: 10px;
        }
        .label-wrap {
          color: #606266;
          font-size: 14px;
          width: 100%;
          margin-bottom: 10px;
          .el-select {
            width: calc(100% - 46.7px) !important;
          }
        }
      }
    }
  }
}
</style>
